<template>
    <template v-for="QSS in QuestionStore.questionSimplify" :key="QSS.id">
                  <QuestionCard @learn-more="QuestionStore.checkThisQuestionDetail" class="qsCard" :data='QSS'/>
    </template>

    <div class="article">


    </div>
      <img class="images"
            v-lazy="'/systemImage/Immortality.png'"
            
      >
    
    <div class="example-pagination-block">
      <div class="example-demonstration">When you have more than 7 pages</div>
      <el-pagination
        v-model:currentPage="QuestionStore.pagination.currentPage"
        v-model:page-size="QuestionStore.pagination.pageSize"
        :total="QuestionStore.pagination.total"
        @size-change="handleSizeChange"
        layout="prev, pager, next"  />
    </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';
import QuestionCard from '../../components/questionCard.vue';
import { useQuestionStore } from '../../stores/questionStore';

const QuestionStore = useQuestionStore();

onMounted(async ()=>{
    await QuestionStore.getQuestionSimplify();
})

const handleSizeChange = async function(){
  await QuestionStore.getQuestionSimplify();
}

</script>

<style scoped> 
.qsCard{
  background-color: rgb(0, 0, 0,0.75);
}

.images{
  transition: all 2s ease;
  opacity: 0;
}

.images.loaded{
  opacity: 1;
}

.article{
  width: 100%;
  height: 800px;
}
</style>